/** 相关漫画左右图文格式 */

import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {BindItem} from '../mobx/home';
import {ObserverText} from './ObserverText';
import {contextStatus, dight} from '../utils';
import {Img} from './Img';
import {dpw12, dpw164, dpw8, dpw88} from '../constants';

interface ImgTextProps extends BindItem {
  isHor?: boolean; // 是否是横图
  isJoin?: boolean; // 图片地址是否手动拼接
}

export const ImgText5 = (props: ImgTextProps & {toDetail: any}) => {
  const {
    Author,
    BID,
    CoverUrl,
    ExtensionUrl,
    ReadCount,
    Status,
    Title,
    Description,
    Type,
    isHor = true,
    isJoin = true,
    toDetail,
  } = props;

  return (
    <TouchableOpacity style={styles.box} onPress={() => toDetail(BID)}>
      <Img
        url={isHor ? ExtensionUrl : CoverUrl}
        style={isHor ? styles.imgh : styles.imgv}
        isJoin={isJoin}
      />
      <View style={styles.info}>
        <View style={{flex: 1}}>
          <ObserverText
            tKey={Title}
            type="card-title"
            numberOfLines={1}
            ellipsizeMode="tail"
          />
          <ObserverText
            tKey={Description}
            type="desc"
            numberOfLines={2}
            ellipsizeMode="tail"
          />
        </View>
        <ObserverText tKey="author" tOptions={{author: Author}} type="desc" />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    marginBottom: dpw12,
    marginHorizontal: 'auto',
  },
  imgh: {
    width: dpw164,
    height: dpw88,
    objectFit: 'cover',
    margin: 0,
  },
  imgv: {},
  info: {
    marginLeft: dpw8,
    flex: 1,
    justifyContent: 'space-around',
  },
});
